<template>
    <Teleport to="body">
        <div class="mask" v-if="layout.bodies.visible">
            <div class="box">
                <div class="title">添加剛體</div>
                <div class="content">
                    <div class="types">
                        <div class="item one-line" :class="{ selected: i == curIndex }" v-for="(item, i) in list"
                            @click="onChoose(i)">
                            {{ item.name }}
                        </div>
                    </div>
                    <div class="attr">
                        <div class="param" v-for="(v, k) in list[curIndex].param">
                            <div class="lab one-line">{{ k }}</div>
                            <input class="val" type="number" :value="v" @change="onChange($event, k)" />
                        </div>
                    </div>
                </div>

                <div class="btns">
                    <div class="btn" @click="onCancel">取消</div>
                    <div class="btn" @click="onConfirm">确定</div>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { TYPE_BODY } from "./Bodies";
import { useLayout } from '@/stores/layout';
import { toNumber } from '../tools/convertType';
import { Bus, V2G_ADD_BODY, V2G_ADD_MESH } from '../game/Bus';

const curIndex = ref<any>(0);
const layout = useLayout();
const list = ref<any[]>([]);

// interface IProp {
//     obj: any
// }
// const props = defineProps<IProp>();
onMounted(() => {
    list.value = TYPE_BODY;
    console.log(list.value, "0000000000")
})

const onChoose = (item: any) => {
    console.log("item", item)
    curIndex.value = item;
}

const onCancel = () => {
    layout.showBodies(false);
}

const onConfirm = () => {
    layout.showBodies(false);
    // console.log("ssss", list.value, TYPE_LIST);
    Bus.emit(V2G_ADD_BODY, {
        obj: list.value[curIndex.value],
        coordinate: layout.coordinate.data
    });
}

const onChange = (e:any, key:string)=>{
    console.log(e.target.value)
    list.value[curIndex.value].param[key] = toNumber(e.target.value, 1);
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>